<template lang="html">
  <div>
    <div class="cuciao_banner">
      <carousel :listshuju="lunbotu_list"></carousel>
    </div>
    <div class="cuxiao_tab">
      <ul class="cuxiao_tab_main">
        <li v-bind:class="{ danjian:isActive}" v-on:click="chayudianji()">茶叶</li>
        <li v-bind:class="{ danjian:hasError}"v-on:click="hongjudianji()">红酒</li>
        <li v-bind:class="{ danjian:active}" v-on:click="jingpingdianji()">精品</li>
      </ul>
    </div>
    <div class="cuxiao_main">
      <h1 class="cuxiao_title">增值</h1>
      <h2 class="cuxiao_h2">珍品增值</h2>
      <cuxaiodel :list="listmain"></cuxaiodel>
    </div>
    <foo-ter></foo-ter>
  </div>
</template>

<script type="text/javascript">
  import footer from "../public/footer/cuxiao.vue";
  import cuxaiodel from "../public/cuxiao/index.vue";
  import carousel from "../public/Carousel/Carousel.vue";
export default {
  data () {
    return {
      listmain:[],
      lunbotu_list:[],
      isActive: true,
      hasError:false,
      active:false,
      pageshuju:1,
      typeshuju:'茶叶'
    }
  },
  methods:{
    shujujiazai:function(type,page){
      let conent = this,
      _url = "/index.php?g=app&m=shopping&a=goods_list_post",
      _luotu = "/index.php?g=app&m=shopping&a=lunbotu_list_post",
      _data = {
        type:type,
        page:page
      };
      conent.$http.post(_url,_data).then(function(data){
          if(data.data.status== "1"){
            for (var i = 0; i <data.data.data.goods_list.length; i++) {
              conent.listmain.push(data.data.data.goods_list[i])
            }
          }else {
            
          }
      },function(response){});
      conent.$http.post(_luotu,{title:"促销专区"}).then(function(data){
          if(data.data.status== "1"){
            conent.lunbotu_list =data.data.data.lunbotu_list;
          }
      },function(response){
          conent.$toast(response.data);
      })
    },
    chayudianji:function(){
      let conent = this;
      conent.isActive = true;
      conent.hasError = false;
      conent.active = false;
      conent.typeshuju = "茶叶";
      conent.pageshuju = 1;
      conent.listmain = [];
      conent.shujujiazai(conent.typeshuju,conent.pageshuju);
    },
    hongjudianji:function(){
      let conent = this;
      conent.isActive = false;
      conent.hasError = true;
      conent.active = false;
      conent.typeshuju = "红酒";
      conent.pageshuju = 1;
      conent.listmain = [];
      conent.shujujiazai(conent.typeshuju,conent.pageshuju);
    },
    jingpingdianji:function(){
      let conent = this;
      conent.isActive = false;
      conent.hasError = false;
      conent.active = true;
      conent.typeshuju = "精品";
      conent.pageshuju = 1;
      conent.listmain = [];
      conent.shujujiazai(conent.typeshuju,conent.pageshuju);
    }
  },
  created:function(){
    let conent = this;
    function GetQueryString(name) {  
    var reg = new RegExp("(^|&|)" + name + "=([^&?]*)(&|$|)", "i");  
    var r = window.location.search.substr(1).match(reg);  //获取url中"?"符后的字符串并正则匹配
    var context = "";  
    if (r != null)  
        context = r[2];  
        reg = null;  
        r = null;  
        return context == null || context == "" || context == "undefined" ? "" : context;  
    } 
    switch (GetQueryString("type")) {
      case "chaye":
        conent.chayudianji();
        break;
      case "hongju":
        conent.hongjudianji();
        break;
      case "jingpin":
        conent.jingpingdianji();
        break;
      default:
        conent.chayudianji();
        break;
    }
    // conent.shujujiazai(conent.typeshuju,conent.pageshuju);
    window.addEventListener('scroll',function(){ 
      if(document.body.scrollTop + window.innerHeight >= document.body.clientHeight-180) {
        conent.pageshuju++;
        conent.shujujiazai("红酒",conent.pageshuju);
      }  
    });  
  },
  components:{
    'foo-ter':footer,
    'carousel':carousel,
    'cuxaiodel':cuxaiodel
  }
}
</script>

<style scoped lang="less">
@import '../../assets/less/index.less';
#cuxiao {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  margin-bottom: 13.3vw;
}
.cuciao_banner{
  width: 100vw;
  height: 55.33vw;
  .banner_img{
    display: inline-block;
    width: 100vw;
    height: 55.33vw;
  }
}
.cuxiao_main{
  width: 100vw;
  .cuxiao_title{}
  .cuxiao_h2{}
}
.cuxiao_tab{
  width: 100vw;
  height: 12vw;
  .cuxiao_tab_main{
    width: 100%;
    height: 12vw;
    color: @color1;
    overflow: hidden;
    zoom:1;
    li{
      width: 33.3333%;
      display: inline-block;
      float: left;
      height: 12vw;
      line-height: 12vw;
      background-color: @color;
    }
    .danjian{
      background-color: @color6;
    }
  }
}
</style>